<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key={{ attrs.api_key }}"></script>
<div id="vue_id_{{ name }}" style="display: inline-block;width:250px">
    <input type="hidden" name="{{ raw_name }}" v-model="value">
    <el-input v-model="value" style="margin-bottom: 10px;"></el-input>
    <div id="v_id_{{ name }}" style="width:{{ attrs.width }};height:{{ attrs.height }}{{ attrs.style }}"></div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#vue_id_{{ name }}',
        data: {
            value: '{{ value }}',
            pickType: '{{ attrs.pick_type }}'
        },
        computed: {
            pos() {
                let defaultPos = [114.059683, 22.543615];
                if (this.pickType === 'geo' && this.value && this.value.replace(/ /g, '').length !== 0) {
                    let val = this.value.split(',');
                    return val;
                } else {
                    //默认在深圳市民中心
                    return defaultPos;
                }
            }
        },
        mounted() {

            this.initMap();
        },
        methods: {
            setValue(pos) {
                let self = this;
                if (this.pickType === 'geo') {
                    this.value = pos.join(",");
                } else {
                    //通过经纬度转换地址
                    this.geocoder.getAddress(pos, (status, result) => {
                        self.value = result.regeocode.formattedAddress;
                    });
                }
            },
            initMap() {
                let self = this;
                let map = new AMap.Map('v_id_{{ name }}', {
                    center: this.pos,
                    zoom: 11,
                    showLabel: true
                });
                this.map = map
                map.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView', 'AMap.MapType', 'AMap.Geolocation'], () => {
                    map.addControl(new AMap.ToolBar());
                    map.addControl(new AMap.Scale());
                });
                map.on('click', e => {
                    let pos = [e.lnglat.getLng(), e.lnglat.getLat()];
                    self.marker.setPosition(pos);
                    self.setValue(pos);
                });

                //创建点
                this.addMarker();
                //初始化逆地理编码
                this.initGeoPlugin();
            },
            initGeoPlugin() {
                let self = this;
                this.map.plugin(["AMap.Geocoder"], function () {
                    self.geocoder = new AMap.Geocoder({
                        radius: 1000,
                        extensions: "all"
                    });

                    //判断如果是address，就获取经纬度
                    if (self.pickType === 'address') {
                        self.geocoder.getLocation(self.value, (status, result) => {
                            let geocodes = result.geocodes;
                            if (geocodes.length > 0) {
                                self.marker.setPosition(geocodes[0].location);
                            }
                        });
                    }
                });

            },
            addMarker() {
                let self = this;
                let marker = new AMap.Marker({
                    map: this.map,

                    icon: new AMap.Icon({
                        image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png",
                        size: new AMap.Size(58, 30),
                        imageOffset: new AMap.Pixel(-0, -0)
                    }),
                    position: this.pos,
                    offset: new AMap.Pixel(-5, -30),
                    draggable: true
                });

                marker.on('dragend', () => {
                    console.log(marker.getPosition())
                    let pos = marker.getPosition();
                    self.setValue([pos.lng, pos.lat]);
                });

                this.marker = marker;
            }
        }
    });
</script>